<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html"
	template="/templates/template-venda.xhtml">

	<ui:define name="ajax_status"></ui:define>

	<ui:define name="title">
		<p:outputLabel value="Venda" styleClass="header-page" />

		<script type="text/javascript">

			$(document).ready(function(){

				setarFocusQTDE = function() {
					$("input[name='formulario:venda_qtde']").focus();
					$("input[name='formulario:venda_qtde']").val(1);
					$("input[name='formulario:venda_qtde']").select();
			    }

			});
			
		</script>

	</ui:define>

	<ui:define name="campos">

		<p:focus context="venda_panel_codigo_barras" />

		<p:panel id="venda_panel_codigo_barras">
			<p:panelGrid>

				<p:row>
					<p:column>

						<p:autoComplete id="venda_codigo_barra" value="#{vendaMB.itemVenda.produto}" size="80" scrollHeight="400"
							panelStyleClass="panel-autocomplete" label="Código de Barras" placeholder="Código de Barras ou Nome do Produto"
							completeMethod="#{vendaMB.autocompletarProdutos}" var="item" itemValue="#{item}" itemLabel="#{item.nome}"
							converter="ProdutoConverter" forceSelection="true">

							<p:column headerText="Código">
								<p:outputLabel value="#{item.codigo}" />
							</p:column>

							<p:column headerText="Nome do Produto">
								<p:outputLabel value="#{item.nome}" />
							</p:column>

							<p:column headerText="Valor">
								<p:outputLabel value="#{item.valorVenda}">
									<f:convertNumber maxFractionDigits="2" minFractionDigits="2" minIntegerDigits="1" />
								</p:outputLabel>
							</p:column>

							<p:ajax event="itemSelect" update="venda_valor_venda venda_valor_total"
								oncomplete="$(function(){setarFocusQTDE();});" />

						</p:autoComplete>

					</p:column>

					<p:column style="width: 10px">
						<p:inputText id="venda_valor_venda" value="#{vendaMB.itemVenda.produto.valorVenda}" size="5" placeholder="Preço"
							disabled="#{vendaMB.itemVenda.produto.valorVenda ne null}" required="true" label="Preço do Produto">
							<f:convertNumber maxFractionDigits="2" minFractionDigits="2" minIntegerDigits="1" />
						</p:inputText>
					</p:column>

					<p:column style="width: 10px">
						<p:inputText id="venda_qtde" value="#{vendaMB.itemVenda.quantidadeVendida}" size="5" placeholder="QTDE"
							label="QTDE">
							<p:ajax event="keyup" update="venda_valor_total" />
						</p:inputText>
					</p:column>

					<p:column style="width: 10px">
						<p:inputText id="venda_valor_total" disabled="true"
							value="#{vendaMB.itemVenda.produto.valorVenda ne null ? vendaMB.itemVenda.produto.valorVenda * vendaMB.itemVenda.quantidadeVendida : null}"
							size="5" placeholder="Total">
							<f:convertNumber maxFractionDigits="2" minFractionDigits="2" minIntegerDigits="1" />
						</p:inputText>
					</p:column>

					<p:column style="width: 10px">
						<p:commandButton icon="ui-icon-check" process="@this venda_codigo_barra venda_valor_venda venda_qtde"
							actionListener="#{vendaMB.incluirItemVenda()}" update="@form" />
					</p:column>
				</p:row>

			</p:panelGrid>

		</p:panel>

		<p:dataTable id="dataTable" value="#{vendaMB.modelCad.listItemVenda}"
			emptyMessage="#{label['sistema.tabela.emptymessage']}" var="item">

			<p:column headerText="Produto">
				<p:outputLabel value="#{item.produto.nome}" styleClass="valor-unitario" />
			</p:column>

			<p:column headerText="Preço" width="60">
				<p:outputLabel value="#{item.produto.valorVenda}" styleClass="valor-unitario">
					<f:convertNumber type="currency" />
				</p:outputLabel>
			</p:column>

			<p:column headerText="Qtde" width="50" style="text-align: center">
				<p:outputLabel value="#{item.quantidadeVendida}" styleClass="valor-unitario" />
			</p:column>

			<p:column headerText="Total" width="70">
				<p:outputLabel value="#{item.totalVenda}" styleClass="valor-unitario">
					<f:convertNumber type="currency" />
				</p:outputLabel>
			</p:column>

			<p:column headerText="#{label['sistema.tabela.acoes']}" width="40">
				<p:commandButton icon="ui-icon-close" title="#{label['sistema.botao.excluir']}"
					actionListener="#{vendaMB.executarExcluirItemVenda(item)}" process="@this" update="@form">
					<p:confirm />
				</p:commandButton>
			</p:column>

		</p:dataTable>


		<div class="div-float-down">
			<div class="div-float-down-inter">

				<p:panelGrid style="width: 95%">

					<p:row>

						<p:column>
							<p:commandButton value="#{label['sistema.botao.concluir']}" title="#{label['sistema.botao.concluir']}"
								oncomplete="PF('dialogCadastro').show()" process="@this" update=":other_form:panel_dialog_fechamento"
								disabled="#{empty vendaMB.modelCad.listItemVenda}">
							</p:commandButton>
						</p:column>

						<p:column>
							<p:commandButton value="#{label['sistema.botao.cancelar']}" immediate="true" update="@form"
								actionListener="#{vendaMB.executarCancelarVenda()}" disabled="#{empty vendaMB.modelCad.listItemVenda}">
								<p:confirm message="Deseja realmente CANCELAR essa venda?" />
							</p:commandButton>
						</p:column>

						<p:column style="width: 50%" />

						<p:column>
							<p:outputLabel value="Total: " styleClass="valor-venda" />
						</p:column>
						<p:column>
							<p:outputLabel value="#{vendaMB.modelCad.vlTotalVenda}" styleClass="valor-venda">
								<f:convertNumber type="currency" />
							</p:outputLabel>
						</p:column>
					</p:row>

				</p:panelGrid>

			</div>
		</div>

		<p:spacer width="100%" height="50" />

	</ui:define>


	<ui:define name="other_form">

		<p:dialog id="dialogCadastro" header="#{label['sistema.dialog.detalhes.titulo']}" widgetVar="dialogCadastro"
			width="400" modal="true" closable="false" resizable="false">

			<p:panelGrid id="panel_dialog_fechamento">

				<p:row>
					<p:column>
						<p:outputLabel value="Total" for="venda_valor_a_pagar" />
					</p:column>
					<p:column>
						<p:inputText id="venda_valor_a_pagar" value="#{vendaMB.modelCad.vlTotalVenda}" disabled="true">
							<f:convertNumber type="currency" />
						</p:inputText>
					</p:column>
				</p:row>

				<p:row>
					<p:column>
						<p:outputLabel value="Valor Pago" for="venda_dinheiro" />
					</p:column>
					<p:column>
						<p:inputText id="venda_dinheiro" value="#{vendaMB.modelCad.vlPagamento}" required="true">
							<f:convertNumber maxFractionDigits="2" minFractionDigits="2" minIntegerDigits="1" />
							<p:ajax event="keyup" update="venda_troco" />
						</p:inputText>
					</p:column>
				</p:row>

				<p:row>
					<p:column>
						<p:outputLabel value="Troco" for="venda_troco" />
					</p:column>
					<p:column>
						<p:inputText id="venda_troco" value="#{vendaMB.modelCad.vlTroco}" disabled="true">
							<f:convertNumber type="currency" />
						</p:inputText>
					</p:column>
				</p:row>


			</p:panelGrid>

			<f:facet name="footer">

				<p:commandButton value="#{label['sistema.botao.concluir']}" update="panel_dialog_fechamento :formulario"
					process="@this panel_dialog_fechamento" actionListener="#{vendaMB.executarConcluirVenda()}" />

				<p:commandButton value="#{label['sistema.botao.cancelar']}" title="#{label['sistema.botao.cancelar']}"
					immediate="true" update="@this" onclick="PF('dialogCadastro').hide()">
				</p:commandButton>

			</f:facet>

		</p:dialog>

	</ui:define>



</ui:composition>